<template>
  <div class="page-article" v-if="model">
    <div class="d-flex py-3 px-2 border-bottom">
      <div class="iconfont icon-Back text-blue pl-2"></div>
      <strong class="flex-1 text-blue">{{ model.title }}</strong>
      <div class="text-grey fs-xs">2023-01-30</div>
    </div>

    <div v-html="model.body" class="px-3 body"></div>

    <div class="px-3 border-top py-2">
      <div class="d-flex ai-center">
        <i class="iconfont icon-menu1"></i>
        <strong class="text-blue fs-lg ml-1">相关资讯</strong>
      </div>

      <div class="mt-1">
        <router-link
          tag="div"
          v-for="item in model.related"
          :to="`/articles/${item._id}`"
          :key="item._id"
          >{{ item.title }}</router-link
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: { required: true },
  },
  data() {
    return {
      model: null,
    };
  },
  watch: {
    id: "fetch",
    // id() {
    //   this.fetch();
    // },
  },
  methods: {
    async fetch() {
      const res = await this.$http.get(`articles/${this.id}`);
      this.model = res.data;
    },
  },
  created() {
    this.fetch();
  },
};
</script>

<style lang="scss" scoped>
.page-article {
  .body {
    :deep(img) {
      max-width: 100%;
      height: auto;
    }

    :deep(iframe) {
      width: 100%;
      height: auto;
    }
  }
}
</style>
